{% extends 'base.html' %}
{% block windowtitle %}My Feeds{% endblock %}
{% block content %}
    <div id="app">

    <div class="row">
     <!-- Add Feed -->
    <h3>Add Feed</h3>
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">From RSS Source</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Custom Calibre Recipe</a>
      </li>
    </ul>

    <!-- Add RSS Feed -->
    <form action="{% url 'api_feed_add' %}" method="post">
        <div class="form-group">
            <label for="feedname" class="bmd-label-floating">Feed Name</label>
            <input type="text" class="form-control" id="feed-rss-title" name="rss-title">
        </div>
        <div class="form-group">
            <label for="feedurl" class="bmd-label-floating">RSS URL</label>
            <input type="text" class="form-control" id="feed-rss-url" name="rss-url">
        </div>
        {% csrf_token %}
        <button type="submit" class="btn btn-primary btn-raised" id="feed-rss-add">Add</button>
    </form>

    <form>
        <div class="form-group">
            <label for="feedname" class="bmd-label-floating">Feed Name</label>
            <input type="text" class="form-control" id="recipe-name" name="name">
        </div>
        <div class="form-group">
            <label for="exampleInputFile" class="bmd-label-floating">Choose Recipe</label>
            <input type="file" class="form-control-file" id="recipe-file" name="file">
            <small class="text-muted">Please upload valid Calibre Recipe file</small>
        </div>

        {% csrf_token %}
        <button class="btn btn-primary btn-raised">Add</button>
    </form>

    </div>
    <div class="row">
        <div class="col col-sm-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Active Feeds</h4>
                    <ul class="list-group" id="active-feeds">

                        {% if availfeed > 0 %}
                            {% for i in availfeed %}
                            <li class="list-group-item">
                                {{ i.title }}
                            </li>
                            {% endfor %}
                        {% else %}
                            <h5>Well, nothing will be pushed yet.</h5>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>

        <!-- Available Feeds -->
        <div class="col col-sm-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Available Feeds & Books</h4>

                    <ul class="list-group" id="available-feeds">
                    {% if availfeeds is not null %}
                        {% for i in availfeeds %}
                        <li class="list-group-item">
                            {{ i.title }},{{ i.url }}
                        </li>
                        {% endfor %}
                    {% else %}
                        <h5>Oops, we found nothing here.</h5>
                    {% endif %}
                    </ul>

                </div>

            </div>
        </div>
    </div>




{% endblock %}
